@import "_function";

.details-page{
header{
  .bc(#cf4cff);
  .p(0,30,0,30);
  .oh();
  .scan{
    .fl();
    background-image: url("../img/home_scan.png");
    .w(60);
    .h(70);
    .bgs(60,70);
    .m(8,0,8,8);
  }
  form{
    .w(500);
    .oh();
    .fl();
    .bdr(25);
    .h(50);
    .m(18,44,18,26);
    .bc(#fff);
    opacity: 0.7;
    input{
      .fl();
      .bn();
      .lh(50);
      .h(50);
      .w(430);
      .bc(#fff);
      .ti(38);
      .fs(26);
      .c(#616161);
    }
    button{
      .fl();
      background: url("../img/home_search_btn.png") transparent;
      .w(30);
      .h(30);
      .bs(30,30);
      .bn();
      .mt(10);
    }
  }
  .message{
    .fl();
    background-image: url("../img/home_message.png");
    .w(42);
    .h(70);
    .bgs(42,70);
    .mt(9);
  }
}
.main{
  .bc(#f8e5ff);
  .pb(98);
  .deta{
    .bc(#fffeff);
    .deta-img-bc{
      .bc(#d666ff);
    }
    img{
      .db();
      .w(690);
      .h(400);
      margin: 0 auto;
    }
    h2,h3,h4{
      .pl(30);
    }
    h2{
        .fs(30);
        .c(#a441ff);
        .w(484);
        .lh(50);
        .mt(20);
      }
    h3{
        .fs(30);
        .c(#ff3352);
        .mt(20);
        span{
          .fs(36);
        }
      }
    h4{
        .mt(52);
        i{
          .fs(24);
          .c(#666666);
          .mr(138);
          .lh(34);
        }
        b{
          .fs(24);
          .c(#666666);
          .ml(70);
        }
      }
  }
  .de_mai{
    .mt(20);
    .bc(#fffeff);
    .integral{
      .pl(30);
      .pt(20);
      .oh();
      .fs(20);
      .c(#666666);
      .pb(22);
      border-bottom: 1px solid #cccccc;
      i{
        .w(60);
        .h(28);
        border: 1px solid #666666;
        .bdr(4);
        .mr(18);
        .fl();
        .tc();
        .lh(28);
      }
      b{
        .fl();
      }
      a{
        .fl();
        .ml(418);
        img{
          .w(20);
          .h(28);
        }
      }
    }
    .quit{
      .pl(30);
      .oh();
      .mt(18);
      i{
        .oh();
        .mr(38);
        .db();
        .fl();
        img{
          .w(20);
          .h(20);
          .mr(18);
          .fl();
        }
        span{
          .fs(20);
          .c(#666666);
          .fl();
        }
      }
    }
    h1{
      .pl(30);
      .fs(24);
      .c(#333333);
      .mt(30);
      .pb(20);
    }
  }
  .de_bot{
    .bc(#fffeff);
    .mt(20);
    .gml{
      .pl(30);
      .oh();
      i{
        .fs(20);
        .c(#666666);
        .fl();
        .w(130);
        .mr(524);
        .h(60);
        .lh(60);
      }
      a{
        .fl();
        .mt(16);
        img{
          .w(20);
          .h(28);
        }
      }
    }
    .ml{
      .pl(30);
      .oh();
      border-top: 1px solid #cccccc;
      i{
        .fs(20);
        .c(#666666);
        .fl();
        .w(130);
        .mr(524);
        .h(60);
        .lh(60);
      }
      a{
        .fl();
        .mt(16);
        img{
          .w(20);
          .h(28);
        }
      }
    }
  }
  .deta_mai{
    .mt(48);
    h1{
      .fs(36);
      .c(#333333);
      .w(368);
      margin:0 auto;
      .h(46);
      .lh(46);
      .tc();
      border-bottom: 1px solid #666666;
    }
    h2{
      .fs(20);
      .ml(190);
      .lh(38);
      i{
        .c(#666666);
        .mr(48);
      }
    }
    .fur{
      .mt(50);
      .oh();
      h3{
        .w(344);
        margin:0 auto;
        .oh();
        i{
          .fs(30);
          .c(#ffffff);
          .bc(#cf4cff);
          .bdr(26);
          .mr(18);
          .h(52);
          .lh(52);
          .w(52);
          .db();
          .fl();
          .tc();
        }
        b{
          .mt(8);
          .fl();
          .fs(24);
          .lh(34);
          .c(#333333);
          .w(270);
          border-bottom: 1px solid #666666;
        }
      }
      img{
        .w(488);
        .h(340);
        .ml(150);
        .fl();
        .mt(34);
      }
    }
  }
}
footer{
  .bc(#ebb2ff);
  width: 100%;
  .db();
  .h(98);
  .pf();
  bottom: 0;left: 0;
  .oh;
  .opt1 {
    .db;
    .fl;
    .ml(52);
    i{
      background: url("../img/dian1_03.png")no-repeat;
      .bgs(50,50);
      .w(50);
      .h(50);
    }
  }
  .opt2 {
    .ml(70);
    .mr(70);
    .db;
    .fl;
    i{
      background: url("../img/dian2_03.png")no-repeat;
      .bgs(50,50);
      .w(50);
      .h(50);
    }
  }
  .opt3{
    .db;
    .fl;
    i{
      background: url("../img/dian3_03.png")no-repeat;
      .bgs(50,50);
      .w(50);
      .h(50);
    }
  }
  .opt4{
    .oh;
    .db;
    .fr;
    span{
      .w(176);
      .lh(98);
      .bc(#d666ff);
      border: 0;
      .utn();
      .fs(30);
      .c(#fffefe);
      .tc;
      .fl;
    }
    .too{
      .bc(#cf4cff);
    }
  }
  .opt1,.opt2,.opt3{
    .fl();
    .w(50);
    .mt(8);
    i{
      .db();
      margin: 0 auto;
    }
    b{
      .db();
      .tc();
      .lh(24);
      .w(50);
      .fs(20);
      .mt(10);
      .c(#333333);
    }
  }
}
}